<template>
  <div class="header">
    <div class="body-width" :gutter="0">
      <div class="header-left">
        <div class="header-logo">LVMH</div>
        <el-popover
          v-for="category in categories"
          :key="category.id"
          placement="bottom"
          width="100%"
          trigger="hover"
          popper-class="header-float"
          :visible-arrow=false>
          <div
            slot="reference"
            class="header-menu"
            @click="clickCategory(category)"
            v-bind:class="{ 'header-menu-active': goodsCategory==category.id }">
            {{category.name}}
          </div>
          <label
            class="header-float-item"
            v-for="subCategory in category.subCategories"
            v-bind:class="{ 'header-float-item-active': goodsSubCategory==subCategory.id }"
            @click="clickSubCategory({category,subCategory})"
            :key="subCategory.id">
            {{subCategory.name}}
          </label>
        </el-popover>


      </div>
      <div class="header-right" :span="16">
        <div class="header-right-item">
          <svg-icon icon-class="query"/>
        </div>

        <div class="header-right-item">
          <svg-icon icon-class="user"/>
          我的
        </div>

        <div class="header-right-item">
          <svg-icon icon-class="cart"/>
          购物车
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapState, mapGetters, mapActions} from 'vuex'
  import subMenu from './subMenu';
  export default {
    name: '',
    data(){
      return {}
    },
    mounted() {

    },
    computed: {
      ...mapGetters([
        'categories',
        'goodsCategory',
        'goodsSubCategory',
      ])
    },
    methods: {
      ...mapActions([
        'clickCategory',
        'clickSubCategory',
      ]),
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .header {
    height: 60px;
    line-height: 60px;
    background-color: #333333;
    vertical-align: middle;
    color: #fff;

    &-left {
      text-align: start;
      display: inline-block;
      float: left;
    }
    &-right {
      display: inline-block;
      float: right;
      &-item {
        display: inline-block;
        margin: 0 8px;
        cursor: pointer;
      }
    }

    &-logo {
      font-size: 32px;
      margin-right: 32px;
      display: inline-block;
      vertical-align: middle;
    }

    &-menu {
      margin: 0 16px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      box-sizing: border-box;
      height: 56px;
      &-active {
        color: yellow;
        border-bottom: 2px yellow solid;
      }
    }
  }
</style>
